<template>
  <div>
    <div class="history_bar">
      <van-nav-bar
        title="历史记录"
        :border="false"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <span>清空</span>
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="item history_card" v-for="(item, index) in list" :key="index">
        <div>
          <van-divider
            :style="{
              color: '#000000',
              padding: '0 10px',
            }"
            :hairline="true"
            content-position="left"
            >{{ item.Newtime === day ? "今天" : item.Newtime }}</van-divider
          >
          <van-swipe-cell v-for="(item1, i) in item.data" :key="i">
            <router-link
              :to="{ name: 'details', params: { gid: item1.GoodsID } }"
            >
              <van-card
                :border="false"
                :price="item1.GoodsPrice"
                :title="item1.GoodsName"
                class="goods-card"
                :thumb="item1.GoodsPic"
              />
            </router-link>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                @click="remove(item1.GoodsID)"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      day: this.time(new Date()),
    };
  },
  mounted() {
    this.getArrlist(this.$store.state.count);
  },
  created() {
    this.getArrlist(this.$store.state.count);
  },
  activated() {
    this.getArrlist(this.$store.state.count);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    getArrlist(data) {
      let echararr = [];
      for (var i = 0; i < data.length; i++) {
        data[i].Newtime = this.time(data[i].Newtime);
        var arrindex = echararr.findIndex((item, index, arr) => {
          //   console.log(data[i].Newtime);
          return item.Newtime === data[i].Newtime;
        }); //获取下标
        // console.log(arrindex);
        if (arrindex == -1) {
          //不存在盘符数据的添加盘符数据
          echararr.push({
            Newtime: data[i].Newtime,
            data: [data[i]],
          });
        } else {
          //有盘符则往盘符数据中添加
          echararr[arrindex].data.push(data[i]);
        }

        //console.log(arrindex);
      }
      this.list = echararr;

      //   console.log(this.list);
    },
    time(timeVal) {
      const dt = new Date(timeVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, 0);
      const hh = (dt.getHours() + "").padStart(2, 0);
      const mm = (dt.getMinutes() + "").padStart(2, 0);
      const ss = (dt.getSeconds() + "").padStart(2, 0);
      return `${y}-${m}-${d}`;
    },
    remove(i) {
      this.$dialog
        .confirm({
          message: "确认删除吗？",
        })
        .then(() => {
          this.$store.commit("deletecount", i);
          this.getArrlist(this.$store.state.count);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.history_bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  top: 0;
  background: #fff;
  z-index: 1500;
}
.main {
  margin-top: 45px;
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
}
</style>